<script lang="ts" setup>
// !axios 与 ts 如何配合使用
import axios from 'axios'
import { ref } from 'vue';
import { TResponse, TChannels, TChannel } from '../types/data'

const channels = ref<TChannel[]>([])

const getChannelList = async () => {
  // !其实 get 的第一个泛型参数控制是 r.data 的类型
  const r = await axios.get<TResponse<TChannels>>('http://geek.itheima.net/v1_0/channels')
  // !问题没有提示
  // r.data.
  channels.value = r.data.data.channels
}

getChannelList()
</script>

<template>
  <ul class="catagtory">
    <li v-for="item in channels" :key="item.id" class="select">{{item.name}}</li>
  </ul>
</template>

<style scoed lang="less"></style>
